<template>
    <div>
        <div class="orderList activity-right">
            <h3>订单列表</h3>
            运单状态：<el-select style="width:15%;margin-bottom:20px;margin-right:10px;" @change="handlChange" v-model="logistic_status" placeholder="选择商品状态">
                <el-option v-for="item in option" :key="item.id" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            支付状态：<el-select style="width:15%;margin-bottom:20px;margin-right:10px;" @change="handlChangeOrder" v-model="order_status" placeholder="选择订单支付状态">
                <el-option v-for="item in option1" :key="item.id" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
           下单方式：<el-select style="width:15%;margin-bottom:20px;margin-right:10px;" @change="handlChangeTradeType" v-model="trade_type" placeholder="选择订单支付方式">
                <el-option v-for="item in option2" :key="item.id" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
           订单类型：<el-select style="width:15%;margin-bottom:20px;margin-right:10px;" @change="handlChangeOrderType" v-model="orderType" placeholder="选择订单类型">
                <el-option v-for="item in option3" :key="item.id" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <section style="margin-bottom:20px;">

            <el-input style="width:25%;" class='input' prefix-icon="el-icon-search" clearable v-model="orderId" placeholder="输入订单号或手机号查询"></el-input>
            <el-button type="primary" @click="checkOrder()" icon="el-icon-search">搜索</el-button>
            </section>
            <el-table ref="multipleTable" :data=" data " style="width: 100%">
                <el-table-column fixed prop="id" label="订单编号" width="240">
                </el-table-column>
                <el-table-column prop="trade_type" label="下单方式" width="150">
                    <template slot-scope='scope'>{{scope.row.trade_type == 'APP'?'APP':(scope.row.trade_type == 'JSAPI'?'小程序' :(scope.row.trade_type == undefined ? '已取消' :'')) }}</template>
                </el-table-column>
                <el-table-column label="支付状态" prop="order_status" width="150">
                    <template slot-scope="scope">{{scope.row.order_status == 'S' ? '支付成功':(scope.row.order_status == 'W' ? '待支付':(scope.row.order_status == 'F' ? '支付失败' :(scope.row.order_status == 'RW' ? '申请退款' :(scope.row.order_status == 'RU' ? '退款中':(scope.row.order_status == 'RS'?'已退款':(scope.row.order_status == 'C' ?'已完成' :(scope.row.order_status == 'Q' ?'已取消':(scope.row.order_status == 'RF' ? '退款失败' : (scope.row.order_status == 'AU'?'退款审核中':'')))))))))}}</template>
                </el-table-column>
                <el-table-column prop="logistic_status" label="发货状态" width="150">
                    <template slot-scope='scope'>{{scope.row.logistic_status == 'LU'?'已发货':(scope.row.logistic_status == 'LW'?'待发货' :(scope.row.logistic_status == 'LP' ? '部分发货' : '已收货')) }}</template>
                </el-table-column>
                <el-table-column prop="price" label="订单金额(元)" width="150">
                </el-table-column>
                <el-table-column prop="couponAmount" label="优惠券(元)" width="150">
                    <template slot-scope='scope'>{{scope.row.couponAmount != undefined ? (scope.row.couponAmount) : '无优惠券'}} </template>
                </el-table-column>
                <el-table-column prop="postage" label="运费(元)" width="150">
                </el-table-column>
                <el-table-column prop="payment" label="实付金额(元)" width="150">
                </el-table-column>
                <el-table-column prop="goods_num" label="商品数量" width="150">
                </el-table-column>
                <el-table-column prop="detailed_address" label="订单地址" width="200">
                </el-table-column>
                <el-table-column prop="is_offline" label="线上/线下" width="200">
                    <template slot-scope="scope">{{scope.row.is_offline == 0 ? '线上' : '线下'}}</template>
                </el-table-column>
                <el-table-column label="下单时间" prop="create_time" width="200">
                    <template slot-scope="scope">{{ $formate(scope.row.create_time,'yyyy-MM-dd hh:mm:ss') }}</template>
                </el-table-column>
                <el-table-column label="订单更新时间" prop="update_time" width="200">
                    <template slot-scope="scope">{{ $formate(scope.row.update_time,'yyyy-MM-dd hh:mm:ss') }}</template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-search" @click="editOrder(scope.row)" size="small">查看订单</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <section class="pagination" >
                <el-pagination background layout="total,prev, pager, next,jumper" :page-count="Math.ceil(total/10)" :total="total" :page-size="10" :current-page.sync="page" @current-change="handlePageChange">
                </el-pagination>
            </section>
        </div>
    </div>
</template>
<script>
import leftBar from "../commonComponents/leftBar.vue";
import { getOrderList, deleteOrder, orderForManage } from "../../data/postData.js";
export default {
    data() {
        return {
            user: JSON.parse(localStorage.getItem("ddaigoUser")),
            logisticStatus: JSON.parse(localStorage.getItem("logisticStatus")),
            orderStatus: JSON.parse(localStorage.getItem("orderStatus")),
            orderNo: "",
            data: null,
            logistic_status: "",
            order_status: "",
            page: this.$store.state.order.orderListPage || 1,
            size: 5,
            total: null,
            orderId: "",
            trade_type: "",
            orderType:'',
            option: [
                {
                    id: 0,
                    value: "",
                    label: "全部订单"
                },
                {
                    id: 1,
                    value: "LU",
                    label: "已发货"
                },
                {
                    id: 2,
                    value: "LW",
                    label: "待发货"
                },
                {
                    id: 3,
                    value: "LS",
                    label: "已收货"
                },
                {
                    id: 4,
                    value: "LP",
                    label: "部分发货"
                }
            ],
            option1: [
                {
                    id: 0,
                    value: "",
                    label: "全部订单"
                },
                {
                    id: 1,
                    value: "S",
                    label: "支付成功"
                },
                {
                    id: 2,
                    value: "W",
                    label: "待支付"
                },
                {
                    id: 3,
                    value: "F",
                    label: "支付失败"
                },
                {
                    id: 4,
                    value: "RW",
                    label: "申请退款"
                },
                {
                    id: 9,
                    value: "AU",
                    label: "退款审核中"
                },
                {
                    id: 5,
                    value: "RU",
                    label: "退款中"
                },
                {
                    id: 6,
                    value: "RS",
                    label: "已退款"
                },
                {
                    id: 7,
                    value: "C",
                    label: "已完成"
                },
                {
                    id: 8,
                    value: "Q",
                    label: "已取消"
                },
                {
                    id: 10,
                    value: "RF",
                    label: "退款失败"
                }
            ],
            option2: [
                {
                    id: "2",
                    value: "",
                    label: "全部订单"
                },
                {
                    id: "0",
                    value: "APP",
                    label: "APP"
                },
                {
                    id: "1",
                    value: "JSAPI",
                    label: "小程序"
                }
            ],
             option3: [
                {
                    id: "1",
                    value: "",
                    label: "全部订单"
                },
                {
                    id: "2",
                    value: "2",
                    label: "礼包订单"
                }
            ]
        };
    },
    mounted() {
        let {
            orderListPage,
            orderStatus,
            logisticStatus,
            orderType,
            tradeType,
            name
        } = this.$store.state.order;
        //this.page = orderListPage || 1;
        this.order_status = orderStatus || "";
        this.logistic_status = logisticStatus || "";
        this.trade_type = tradeType || '';
        this.orderType = orderType || '';
        this.orderId = name || ''
        if(this.orderId != ''){
            this.checkOrder()
        }else{

            this.getOrderList(this.page);
        }
    },
    methods: {
        
        checkOrder() {
            this.$store.dispatch("saveSearchName",this.orderId)
            var params = {
                data: {
                    page: "1",
                    size: "10",
                    orderId: this.orderId
                }
            };
            if(this.orderId === ''){
                this.getOrderList(1);
               
            }else{
                this.$fetch.post(orderForManage, params).then(res => {
                    console.log('-------',this.data)
                    this.data = res.data;
                    this.total = +res.total;
                    this.data.forEach(item => {
                        if (item.coupon_price) {
                            item.couponAmount = item.coupon_price
                            item.payment = (parseInt(+item.price*100000 + item.postage*100000 - item.coupon_price*100000))/100000 > 0 ? (parseInt(+item.price*100000 + item.postage*100000 - item.coupon_price*100000))/100000 : 0
                        } else {
                            item.payment = item.price + item.postage;
                        }
                        console.log(item.payment,'payment')
                    });
                }).catch(err => {});
            }
        },
        //删除订单
        delateOrder(scope) {
            let params = {
                data: {
                    orderId: scope.id
                }
            };
            this.$fetch.post(deleteOrder, params).then(res => {
                this.$message({
                    message: res.message,
                    type: 'success',
                    duration: 1000
                })
            }).catch(err => {
                this.$message({
                    message: err.message,
                    type: 'error',
                    duration: 1000
                })
            });
        },
        getOrderList(page) {
            var params = {
                data: {
                    page: page,
                    size: 10,
                    roleId: this.user.roleId.toString(),
                    logisticStatus: this.logistic_status,
                    orderStatus: this.order_status,
                    tradeType: this.trade_type,
                    storeNo: this.user.storeNo,
                    orderType: this.orderType
                }
            };
            this.$fetch.post(getOrderList, params).then(res => {
                this.data = res.data;
                this.total = +res.total;
                this.data.forEach(item => {
                    if (item.couponAmount) {
                        item.payment = (parseInt(+item.price * 100000 + item.postage*100000 - item.couponAmount * 100000)) /100000 > 0 ? (parseInt(+item.price * 100000 + item.postage*100000 - item.couponAmount * 100000)) /100000 : 0
                    } else {
                        item.payment = item.price + item.postage;
                    }
                });
            }).catch(err => {
                this.$message({
                    message: err.message,
                    type: "warning"
                });
            });
        },
        handlChangeTradeType() {
            this.page = 1
            let  trade_type = this.trade_type;
            this.$store.dispatch("saveTradeType", this.trade_type);
            this.getOrderList(this.page, trade_type);
        },

        handlePageChange(page) {
            this.page = page;
            this.getOrderList(this.page, this.logistic_status);
            this.$store.dispatch("saveOrderListPage", this.page);
        },
        handlChange() {
            this. page = 1
            let logistic_status = this.logistic_status;
            this.$store.dispatch("saveLogisticStatus", this.logistic_status);
            this.getOrderList(this.page, logistic_status);
        },
        handlChangeOrder() {
            this.page = 1
            let order_status = this.order_status;
            this.$store.dispatch("saveOrderStatus", this.order_status);
            this.getOrderList(this.page, order_status);
        },
        //选择订单类型
        handlChangeOrderType(){
            this.page = 1
            let orderType = this.orderType;
            this.$store.dispatch("saveOrderType", this.orderType);
            this.getOrderList(this.page, orderType);
        },

        editOrder(scope) {
            localStorage.setItem( "routeParams", JSON.stringify({ id: scope.id, storeNo: scope.store_no }));
            this.$store.dispatch("saveOrderStatus", this.order_status);
            this.$store.dispatch("saveLogisticStatus", this.logistic_status);
            this.$router.push({
                name: "orderDetail",
                params: {
                    id: scope.id,
                    storeNo: scope.store_no
                }
            });
        }
    }
};
</script>
<style scoped lang="less">
.orderList {
    width: calc(~"100% - 250px");
    margin-top: 66px;
    margin-left: 230px;
    float: left;
    h3 {
        margin: 20px 0px;
        font-size: 24px;
    }
    .input {
        width: 300px;
    }
}
.pagination {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
</style>
